<template>
  <div class="div">
    <Header2 title="地址管理"></Header2>
    <div class="dizhi1" v-for="(item,index) in list" :key="index">
      <div class="dizhi2" @click="xiugaidizhi(index)">
        <font class="f2">{{item.name}}</font>&nbsp;&nbsp;&nbsp;
        <font class="f1">{{item.phone}}</font>&nbsp;
        <font class="f2" v-if="item.defaultaddress==1">[默认]</font>
        <br />
        <font class="f1">{{item.province}}</font>&nbsp;
        <font class="f1">{{item.city}}</font>&nbsp;
        <font class="f1">{{item.area}}</font>
        <br />
        <font class="f1">{{item.detailed_address}}</font>
      </div>
      <hr />
    </div>
    <div>
      <van-button type="primary" size="large" @click="choose">添加地址</van-button>
      <van-popup v-model="show" position="bottom">
        <div class="divxx"></div>
        <font class="fdz">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;姓名：</font>
        <el-input v-model="input1" placeholder="请输入联系人"></el-input>
        <br />
        <font class="fdz">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电话：</font>
        <el-input v-model="input2" placeholder="请输入联系人电话"></el-input>
        <br />
        <font class="fdz">所在地区：</font>
        <el-input
          v-model="input3"
          placeholder="选择地址信息"
          :disabled="disabled"
          v-on:click.native="showRO"
        ></el-input>
        <br />
        <font class="fdz">详细地址：</font>
        <el-input v-model="input4" placeholder="请输入详细地址"></el-input>
        <p class="pwrap" v-if="show2">
          <v-distpicker
            type="mobile"
            @province="onChangeProvince"
            @city="onChangeCity"
            @area="onChangeArea"
          ></v-distpicker>
        </p>
        <div class="divmrdz">
          <font class="mrdzfont">默认地址</font>
          <el-switch v-model="mrdz" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </div>
        <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)" @click="tianjiaxdz">添加新地址</van-button>
        <br />
        <font class="mysr">{{mysr}}</font>
      </van-popup>
      <van-popup v-model="show3" position="bottom">
        <div class="divxx"></div>
        <font class="fdz">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;姓名：</font>
        <el-input v-model="x1" placeholder="请输入联系人"></el-input>
        <br />
        <font class="fdz">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电话：</font>
        <el-input v-model="x2" placeholder="请输入联系人电话"></el-input>
        <br />
        <font class="fdz">所在地区：</font>
        <el-input
          v-model="x3"
          placeholder="选择地址信息"
          :disabled="disabled"
          v-on:click.native="showRO2"
        ></el-input>
        <br />
        <font class="fdz">详细地址：</font>
        <el-input v-model="x4" placeholder="请输入详细地址"></el-input>
        <p class="pwrap" v-if="show4">
          <v-distpicker
            type="mobile"
            @province="onChangeProvince2"
            @city="onChangeCity2"
            @area="onChangeArea2"
          ></v-distpicker>
        </p>
        <div class="divmrdz">
          <font class="mrdzfont">默认地址</font>
          <el-switch v-model="x5" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </div>
        <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)" @click="xgdz">修改地址</van-button>&nbsp;&nbsp;&nbsp;
        <van-button color="linear-gradient(to left, red, pink)" @click="scdz()">删除地址</van-button>
        <br />
        <font class="mysr">{{mysr}}</font>
      </van-popup>
    </div>
  </div>
</template>
<script>
import Header2 from "@/components/Headergl/Header5";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import VDistpicker from "v-distpicker";
export default {
  data() {
    return {
      list: [],
      showfk: true,
      show: false,
      show2: false,
      show3: false,
      show4: false,
      txt1: "",
      txt2: "",
      txt3: "",
      txt12: "",
      txt22: "",
      txt32: "",
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      disabled: true,
      mrdz: false,
      defaultaddress: 0,
      mysr: "",
      x1: "",
      x2: "",
      x3: "",
      x4: "",
      x5: true,
      id: 0,
      defaultaddress2: 0
    };
  },
  methods: {
    choose() {
      this.show = !this.show;
    },
    showRO() {
      this.show2 = !this.show2;
    },
    showRO2() {
      this.show4 = !this.show4;
    },
    onChangeProvince(a) {
      console.log(a);
      this.txt1 = a.value;
    },
    onChangeCity(a) {
      console.log(a);
      this.txt2 = a.value;
    },
    onChangeArea(a) {
      console.log(a);
      this.txt3 = a.value;
      this.x4 = this.txt1 + this.txt2 + this.txt3;
      this.show2 = false;
    },
    onChangeProvince2(a) {
      console.log(a);
      this.txt12 = a.value;
    },
    onChangeCity2(a) {
      console.log(a);
      this.txt22 = a.value;
    },
    onChangeArea2(a) {
      console.log(a);
      this.txt32 = a.value;
      this.x3 = this.txt12 + this.txt22 + this.txt32;
      this.show4 = false;
    },
    ...mapMutations(["xg"]),
    ...mapMutations(["userxg"]),
    ...mapMutations(["yxxg"]),
    chushihua() {
      this.$http
        .get(this.poot + "selectaddresss/" + this.user)
        .then(response => {
          this.list = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    xgdz() {
      if(this.x5){
        this.defaultaddress2=1
      }

      this.$http
        .get(
          this.poot +
            "updateaddress2/" +
            this.id +
            "/" +
            this.defaultaddress2 +
            "/" +
            this.txt12 +
            "/" +
            this.txt22 +
            "/" +
            this.txt32 +
            "/" +
            this.x4 +
            "/" +
            this.x2 +
            "/" +
            this.x1
        )
        .then(re1sponse => {
 
          this.chushihua();
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    scdz() {
      this.$http
        .get(this.poot + "deleteAddressbyid/" + this.id)
        .then(re1sponse => {
          this.chushihua();
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    xiugaidizhi(index) {
      this.show3 = !this.show3;
      this.id = this.list[index].id;
      this.x1 = this.list[index].name;
      this.x2 = this.list[index].phone;
      this.x3 =
        this.list[index].province +
        this.list[index].city +
        this.list[index].area;
      this.x4 = this.list[index].detailed_address;
      this.txt12 = this.list[index].province;
      this.txt22 = this.list[index].city;
      this.txt32 = this.list[index].area;
      if (this.list[index].defaultaddress == 0) {
        this.x5 = false;
        this.defaultaddress2 = 0;
      }
    },
    tianjiaxdz() {
      if (this.mrdz) {
        this.defaultaddress = 1;
      } else {
        this.defaultaddress = 0;
      }
      if (
        this.input1 != "undefined" &&
        this.input1 != null &&
        this.input1 != "" &&
        this.input2 != "undefined" &&
        this.input2 != null &&
        this.input2 != "" &&
        this.input3 != "undefined" &&
        this.input3 != null &&
        this.input3 != "" &&
        this.input4 != "undefined" &&
        this.input4 != null &&
        this.input4 != ""
      ) {
        this.$http
          .get(
            this.poot +
              "addAddress/" +
              this.user +
              "/" +
              this.defaultaddress +
              "/" +
              this.txt1 +
              "/" +
              this.txt2 +
              "/" +
              this.txt3 +
              "/" +
              this.input4 +
              "/" +
              this.input2 +
              "/" +
              this.input1
          )
          .then(response => {
            this.show = !this.show;
            this.$toast("添加成功");
            this.chushihua();
          })
          .catch(function(error) {
            console.log(error);
          });
      } else {
        this.mysr = "检查是否有空";
      }
    }
  },
  components: {
    Header2: Header2,
    VDistpicker: VDistpicker
  },
  computed: {
    ...mapState(["poot"]),
    ...mapState(["yx"]),
    ...mapState(["zhuantai"]),
    ...mapState(["user"])
  },
  mounted() {
    this.chushihua();
  }
};
</script>
<style scoped>
.mysr {
  color: red;
  font-size: 5px;
}
.mrdzfont {
  font-size: 5px;
  color: red;
}
.divmrdz {
  text-align: right;
  margin-right: 20px;
}
.yaunxingann {
  margin-top: 20px;
}
.fdz {
  font-size: 10px;
}
.el-input {
  margin-bottom: 5px;
  width: 70%;
}
.divxx {
  margin-top: 10px;
  text-align: left;
}

.van-popup {
  height: 450px;
}
.f2 {
  color: red;
  font-size: 5px;
}
.f1 {
  font-size: 5px;
}
.f3 {
  font-size: 20px;
  margin-left: 40%;
  color: rgb(255, 153, 0);
}
.dizhi1 {
  text-align: left;
  margin-left: 10px;
}
.h3 {
  color: red;
  font-size: 5px;
}

.div {
  margin-top: 40px;
}
.v-distpicker {
  margin-top: 10px;
}
.pwrap {
  height: 150px;
  overflow-y: auto;
  position: fixed;
  left: 0;
  bottom: 0;
  margin-bottom: 10px;
  width: 100%;
}

.pwrap >>> .distpicker-address-wrapper {
  color: #999;
}

.pwrap >>> .address-header {
  position: fixed;
  bottom: 150px;
  width: 100%;
  background: rgb(0, 174, 255);
  color: #fff;
}

.pwrap >>> .address-header ul li {
  flex-grow: 1;
  text-align: center;
}

.pwrap >>> .address-header .active {
  color: #fff;
  /* border-bottom:#666 solid 8px */
}

.pwrap >>> .address-container .active {
  color: #000;
}
</style>